<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
            <el-col :span="6">
                <el-form-item label="消息类型:" prop="messageType">
                    <el-select v-model="queryParams.messageType" clearable>
                        <el-option :label="item.dictLabel" :value="item.dictSort"
                            v-for="(item, index) in busFlowTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                
            </el-col>
            <el-col :span="6">
                <el-form-item label="消息通知:" prop="messageName">
                    <el-input v-model="queryParams.messageName" clearable placeholder="请输入消息通知"></el-input>
                </el-form-item>
            </el-col>
        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="30px">
                        <template v-slot="{ row }">
                            <e-button size="mini" type="text" @click="handleOperate(row)"
                                v-hasPermi="['messageManagement:type:see']">查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="消息类型" align="center" prop="messageType" min-width="120px"
                        show-overflow-tooltip>
                        <template v-slot="{ row }">
                            <dict-tag :options="dict.type.message_type" :value="row.messageType" />
                        </template>
                    </el-table-column>
                    <el-table-column label="消息通知" align="center" prop="messageName" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="参数名称" align="center" prop="paramName" min-width="120px"
                        show-overflow-tooltip />
                    <el-table-column label="创建时间" align="center" prop="createTime" min-width="120px"
                        show-overflow-tooltip />
                </template>
            </table-page>

        </div>
        <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="45%">
            <el-descriptions :column="1">
                <el-descriptions-item label="消息类型"> <dict-tag :options="dict.type.message_type"
                        :value="form.messageType" /></el-descriptions-item>
                <el-descriptions-item label="消息通知">{{ form.messageName }}</el-descriptions-item>
                <el-descriptions-item label="参数名称">{{ form.paramName }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as apis from "@/api/messageManagement/index.js";
export default {
    name: "MessageType",
    components: {
        SearchContent,
    },
    dicts: [ 'message_type'],
    data() {
        return {
            // 遮罩层
            loading: false,
            retutnCarTimes: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                messageType: null,
                messageName:null,
            },
            total: 0,
            dataList: [],
            title: '查看',
            form: {
                messageType: '',
                paramName: '',
                messageName:'',

            },
            open: false,
            busFlowTypeList: [],

        };
    },
    mounted() {
        this.getList()
    },
    async created() {
        this.busFlowTypeList = await this._getDicts("message_type");
    },
    activated() {
        this.handleQuery()
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            apis.messageTypeList(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                messageType: null,
                messageName:null,
            },
                this.handleQuery();
        },


        handleOperate(row) {
            this.open = true
            apis.messageTypeList({ type: row.type }).then((res) => {
                this.form = res?.rows[0]
            })
        },
    }
};
</script>
